import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pinput/pinput.dart';
import 'package:sports_new/controller/my/login_logic.dart';
import 'package:sports_new/resources/colours.dart';
import 'package:sports_new/resources/styles.dart';
import 'package:sports_new/widgets/base/qkd_text.dart';
import 'package:sports_new/widgets/base/qkd_button.dart';
import '../../utils/utils.dart';

class MyLoginVerifyPage extends StatefulWidget {
  const MyLoginVerifyPage({super.key});

  @override
  State<MyLoginVerifyPage> createState() => _MyLoginVerifyPageState();
}

class _MyLoginVerifyPageState extends State<MyLoginVerifyPage> {
  final logic = Get.find<LoginLogic>(
    tag: Get.arguments == LoginType.bind ?'1':'0'
  );
  final focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      FocusScope.of(context).requestFocus(focusNode);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: Styles.appBar(backgroundColor: Colours.transparent),
      body: SafeArea(
        top: false,
        child: Column(
          children: [
            SizedOverflowBox(
              size: const Size(0, 188),
              alignment: Alignment.topCenter,
              child: Image.asset(
                Utils.getImgPath('login_header.png'),
                fit: BoxFit.cover,
                width: Get.width,height: 200,
              )
            ),
            Container(
              clipBehavior: Clip.antiAlias,
              padding: const EdgeInsets.symmetric(horizontal: 40),
              decoration: const BoxDecoration(
                color: Colours.white,
                borderRadius: BorderRadius.vertical(
                  top: Radius.circular(12)
                )
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(height: 40),
                  const QkdText('输入验证码',
                    fontSize: 20, fontWeight: FontWeight.w500
                  ),
                  const SizedBox(height: 4),
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const QkdText('验证码已发送：', color: Colours.grey66),
                      QkdText(logic.phoneNumber!,
                        color: Colours.grey66, fontWeight: FontWeight.w500
                      ),
                    ],
                  ),
                  const SizedBox(height: 32),
                  codeWidget(),
                  const SizedBox(height: 20),
                  timerWidget()
                ]
              )
            ),
          ]
        )
      ),
    );
  }

  Widget codeWidget() {
    final defaultPinTheme = PinTheme(
      width: 44, height: 56,
      textStyle: const TextStyle(fontSize: 28, color: Colours.text),
      decoration: BoxDecoration(
        border: Border.all(color: Colours.grey99),
        borderRadius: BorderRadius.circular(4)
      ),
    );
    final focusPinTheme = PinTheme(
      width: 44, height: 56,
      textStyle: const TextStyle(fontSize: 28, color: Colours.text),
      decoration: BoxDecoration(
        border: Border.all(color: Colours.main),
        borderRadius: BorderRadius.circular(4)
      ),
    );
    return Pinput(
      focusNode: focusNode,
      length: 6,
      pinAnimationType: PinAnimationType.fade,
      defaultPinTheme: defaultPinTheme,
      focusedPinTheme: focusPinTheme,
      showCursor: true,
      cursor: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 2, height: 20,
            decoration: const BoxDecoration(color: Colours.main),
          ),
        ],
      ),
      onCompleted: (code) => logic.doLogin(code),
    );
  }

  Widget timerWidget() {
    return Obx(() => GestureDetector(
      onTap: () {
        if (logic.currentTime == 0) {
          logic.resendSms();
        }
      },
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 12),
        child: QkdText(
          logic.currentTime == 0
            ? '重发验证码'
            : '重发验证码（${logic.currentTime}秒）',
          color: logic.currentTime == 0 ? Colours.main : Colours.grey99,
          fontSize: 14,
        ),
      ),
    ));
  }
}
